<template>
  <div class="prop" style="margin-left: 10px">
    <h1>父组件</h1>
    <p>父组件中的obj{{ obj?.obj }}</p>
    <br />
    <div style="border: 1px solid #ccc; padding: 10px">
      <h2>子组件</h2>
      <Aaa
        ref="zizujian"
        :title="obj.title"
        :list="obj.list"
        @zifu="changeList"
        @zifu2="changeArr"
      ></Aaa>
      <Aaa
        ref="sonComponent"
        :title="obj.title"
        :list="obj.list"
        @zifu="changeList"
        @zifu2="changeArr"
      ></Aaa>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, Ref } from "vue";
import Aaa from "./a.vue";
type Prop = {
  title: string;
  list: number[];
  obj?: object;
};

// 父传子
const obj = reactive<Prop>({
  title: "我是父组件的标题title",
  list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
});

// 子传父
const changeList = (o: Prop["obj"]) => {
  obj["obj"] = o;
  console.log(o, "", obj);
};
const changeArr = (o: Prop["list"]) => {
  obj["list"] = o;
  console.log(o, "", obj);
};

// 获取子组件的实例
let zizujian = ref<Ref<typeof Aaa>>();

let sonComponent = ref<InstanceType<typeof Aaa>>()

onMounted(() => {
  // 可以拿到值  但是会有报错  做此记录
  console.log("sonComponent.value.arr=>", sonComponent.value?.arr)
  console.log("zizujian.value.obj=>", zizujian.value?.obj);
});
</script>
<style lang="less" scoped>
.prop {
  font-size: 20px;
}
</style>
